<template>
  <div id="box">
    <van-nav-bar
      title="记录这一刻,留给懂你的人"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-field
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="100"
      placeholder="分享一下此刻心情"
      show-word-limit
    />
    <van-uploader v-model="fileList" multiple :max-count="6" :after-read="afterRead" />
    <van-button type="info" @click="uplode" plain size="large">上传</van-button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      message: "",
      //图片列表
      filesList:[]
    };
  },
  methods: {
    uplode() {//图片上传
      let data=new FormData();
      data.append("id",this.$store.state.userId)
      data.append("content",this.message)
      this.filesList.forEach((v)=>{
        data.append("imgs1",v.file)
      })
      this.$axios.post(this.$api+"files",
        data,
      {
        headers:{'Content-Type':'multipart/form-data'}
      }).then(res=>{
        console.log(res);
        if(res.status==200){
          this.$toast('发布成功')
          this.$router.push("/record")
        }
      })
      data.append=("imgs1",this.filesList)

    },
    onClickLeft(){//路由导航
      this.$router.push("/record")
    },
    afterRead(file) {
      this.filesList.push(file);
    },
  },
};
</script>

<style>
#box{
  background-color: #eee;
  min-height: 100vh;
}
.van-uploader{
    width: 100%;
    background-color: #fff;
}
.van-uploader__preview-image,.van-uploader__upload{
    width: 30vw !important;
    height: 100px  !important;
}
.van-field__control{
    min-height: 25vh;
}

</style>